<template>
	<div class="wrapper">
		<v-head></v-head>
		<el-container>
			<el-main>
				<div class="pane">
					<el-tabs v-model="activeName" tabPosition="left">
						<el-tab-pane label="实物图" name="first" id='carWrap'>
							<el-carousel id='car' v-show="current=='1'" :interval="5000" arrow="always">
								<el-carousel-item v-for="(item,i) of cars" :key="i+'car'">
									<img class='bigimg1' :src="item.img" alt="">
								</el-carousel-item>
							</el-carousel>
							 <el-carousel id='car' class = 'carousel_load' v-show="current=='3'" :interval="5000" arrow="always">
							 	<el-carousel-item v-for="(item,i) of loads" :key="i+'load'">
							 		<img class='carousel_img' :src="item.img" alt="">
							 	</el-carousel-item>
							 </el-carousel>
							 <el-carousel id='car' class = 'carousel_load' v-show="current=='12'" :interval="5000" arrow="always">
							 	<el-carousel-item v-for="(item,i) of guidaos" :key="i+'guidao'">
							 		<img class='carousel_img' :src="item.img" alt="">
							 	</el-carousel-item>
							 </el-carousel>
							<img v-show="current!='1'&&current!='3'&&current!='12'" class='bigimg' :src="introduce" alt="">
						</el-tab-pane>
						<el-tab-pane label="参数" name="second">
							<!-- 汽车 -->
							<el-table v-show="current=='1'" :data="vehicleData" style="width: 35%;margin-left:1%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" width="108" label="">
								</el-table-column>
								<el-table-column prop="model3" width="98" label="特斯拉Model3">
								</el-table-column>
								<el-table-column prop="es8" label="蔚来ES8">
								</el-table-column>
								<el-table-column prop="ex360" label="北汽新能源EX360">
								</el-table-column>
							</el-table>
							<!-- 电池 -->
							<el-table v-show="current=='2'" :data="storageData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="">
								</el-table-column>
								<el-table-column prop="storage" label="电池储能">
								</el-table-column>
								<el-table-column prop="es8" label="">
								</el-table-column>
								<el-table-column prop="capacity" label="电容器储能">
								</el-table-column>
							</el-table>
							<!-- 负荷 -->
							<el-table v-show="current=='3'" :data="loadData" style="width: 30%" :header-cell-style="headerStyle" :cell-style="cellStyle">
								<el-table-column prop="parameter" label="">
								</el-table-column>
								<el-table-column prop="litload" label="照明负荷">
								</el-table-column>
								<el-table-column prop="motor" label="电力负荷(电机)">
								</el-table-column>
								<el-table-column prop="airCondition" label="电力负荷(空调)">
								</el-table-column>
							</el-table>
							<!-- 充电站 -->
							<el-table v-show="current=='4'" :data="chargeStationData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="">
								</el-table-column>
								<el-table-column prop="DCX007A" label="DCX007A">
								</el-table-column>
								<el-table-column prop="DCX015A" label="DCX015A">
								</el-table-column>
								<el-table-column prop="DCX020A" label="DCX020A">
								</el-table-column>
							</el-table>
							<!-- 变电站 -->
							<el-table v-show="current=='5'" :data="biandianData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="">
								</el-table-column>
								<el-table-column prop="combined" label="组合式变电站">
								</el-table-column>
							</el-table>
							<!-- 母线 -->
							<el-table v-show="current=='6'" :data="nodeData" style="width: 30%" :header-cell-style="headerStyle" :cell-style="cellStyle">
								<el-table-column prop="parameter" label="" width="110">
								</el-table-column>
								<el-table-column prop="type1" label="型号1" width="140">
								</el-table-column>
								<el-table-column prop="type2" label="型号2">
								</el-table-column>
								<el-table-column prop="type3" label="型号3">
								</el-table-column>
							</el-table>
							<!-- 光伏 -->
							<el-table v-show="current=='7'" :data="photovoltaicData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="参数">
								</el-table-column>
								<el-table-column prop="combined" label="值">
								</el-table-column>
							</el-table>
							<!-- 并连电容器 -->
							<el-table v-show="current=='8'" :data="capacitorData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="参数">
								</el-table-column>
								<el-table-column prop="combined" label="值">
								</el-table-column>
							</el-table>
							<!-- 柴油发电机 -->
							<el-table v-show="current=='9'" :data="generatorData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="参数">
								</el-table-column>
								<el-table-column prop="combined" label="值">
								</el-table-column>
							</el-table>
							<!-- 变压器 -->
							<el-table v-show="current=='10'" :data="transData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="" width="180">
								</el-table-column>
								<el-table-column prop="box" label="箱式变压器">
								</el-table-column>
								<el-table-column prop="storage" label="电源变压器">
								</el-table-column>
							</el-table>
							<!-- 风电 -->
							<el-table v-show="current=='11'" max-height="360" :data="windPowerData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="参数">
								</el-table-column>
								<el-table-column prop="value" label="值">
								</el-table-column>
							</el-table>
							<!-- 轨道交通 -->
							<el-table v-show="current=='12'" :data="guidaoData" style="width: 30%" :header-cell-style="headerStyle"
							 :cell-style="cellStyle">
								<el-table-column prop="parameter" label="参数" width="180">
								</el-table-column>
								<el-table-column prop="value1" label="值1">
								</el-table-column>
								<el-table-column prop="value2" label="值2">
								</el-table-column>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="电气符号" name="third">
							<el-row>
								<!-- <el-col :span="5">
									<div class="grid-content bg-purple">
									  <img class='symbol' :src="symbol1" alt="">
									</div>
								</el-col> -->
								<el-col :span="9">
									<div class="grid-content bg-purple-light">
										<img :class="current=='3'?'load':'symbol'" :src="symbol2" alt="">
									</div>
								</el-col>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="right" v-for="(item,i) of equipment" :key='i+"b"' :id="'right'+i">
					<div v-show='items.id==current' v-for="(items,i) of item.list" :key='i+"c"'>
						<p :class="items.id=='12'?'guidao':'rightText'">{{items.introduce}}</p>
					</div>
				</div>
			</el-main>
			<footer>
				<el-carousel arrow="always" height="60" :autoplay=false>
					<el-carousel-item v-for="(item,i) in equipment" :key="i">
						<div class="round" v-for="(items,i) of item.list" :key='i+"a"' @click='toRouter(items.id,items.title)'>
							<img v-if='items.id==current' class="roundImg_hover" :src="items.imgActive" alt="">
							<img v-else class="roundImg" :src="items.img" alt="">
						</div>
					</el-carousel-item>
				</el-carousel>
			</footer>
		</el-container>
	</div>
</template>

<script>
	import vHead from './Header.vue'
	export default {
		components: {
			vHead
		},
		data() {
			return {
				current: '1',
				radio: '1',
				cars: [{
						img: require('../../assets/img/equi/introduce/car1.png')
					},
					{
						img: require('../../assets/img/equi/introduce/car2.png')
					},
					{
						img: require('../../assets/img/equi/introduce/car3.png')
					},
				],
				loads: [{
						img: require('../../assets/img/equi/introduce/load1.png')
					},
					{
						img: require('../../assets/img/equi/introduce/load2.png')
					},
					{
						img: require('../../assets/img/equi/introduce/load3.png')
					},
					{
						img: require('../../assets/img/equi/introduce/load4.png')
					},
				],
				guidaos: [{
						img: require('../../assets/img/equi/introduce/guidao1.png')
					},
					{
						img: require('../../assets/img/equi/introduce/guidao2.png')
					},
					{
						img: require('../../assets/img/equi/introduce/guidao3.png')
					},
				],
				equipment: [{
						list: [{
								id: '1',
								title: 'vehicle',
								img: require("../../assets/img/sidebar/img/vehicle.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/vehicle1.png"),
								introduce: '电动汽车是指使用电能作为动力源，通过电动机驱动行驶的汽车。它属于新能源汽车，按照动力来源分类，又细分为纯电动汽车（BEV）、混合动力电动汽车（HEV）和燃料电池电动汽车（FCEV）。电动汽车相比于传统燃油汽车，具有无污染、噪声低、能源转换效率高、结构简单维修方便等优点；目前主要存在的短板是续航里程短、充电时间长、充电桩网络覆盖范围有限、动力电池更换成本高等。\n我国是电动汽车大国，自2015年到2019年连续4年位居全球新能源汽车产销第一大国，每年新能源汽车的产销量与保有量均占据全球市场的50%以上，其中电动巴士占到全球98%以上。技术方面，中国在新能源电动汽车的主要动力电池，即磷酸铁锂电池和三元锂电池的生产上，位居世界前列，动力电池装机量排名全球前10的供应商中，有7家来自中国。\n在2020年底，国务院办公厅印发的《新能源汽车产业发展规划（2021－2035年）》中指出，要以习近平新时代中国特色社会主义思想为指引，坚持新发展理念，以深化供给侧结构性改革为主线，坚持电动化、网联化、智能化发展方向，以融合创新为重点，突破关键核心技术，优化产业发展环境，推动我国新能源汽车产业高质量可持续发展，加快建设汽车强国。到2025年，纯电动乘用车新车平均电耗降至12.0千瓦时/百公里，新能源汽车新车销售量达到汽车新车销售总量的20%左右，高度自动驾驶汽车实现限定区域和特定场景商业化应用。到2035年，纯电动汽车成为新销售车辆的主流，公共领域用车全面电动化，燃料电池汽车实现商业化应用，高度自动驾驶汽车实现规模化应用，有效促进节能减排水平和社会运行效率的提升。'
							},
							{
								id: '2',
								title: 'storage',
								img: require("../../assets/img/sidebar/img/storage.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/storage1.png"),
								introduce: '储能主要是指电能的储存，多是以其他形式的能量将电能进行储存，包括电池储能、电感器储能、电容器储能、飞轮储能等等。储存的能量可用做应急能源，也可用于在电网负荷低的时候储存能量，在电网高负荷的时候输出能量，减轻电网负荷波动。'
							},
							{
								id: '3',
								title: 'load',
								img: require("../../assets/img/sidebar/img/load.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/load1.png"),
								introduce: '电力系统中所有用电设备所耗用的功率，简称负荷。在电力系统中，发电机的发电与负荷用电是一个统一的整体。按用途可分为照明负荷、电力负荷两类，电力负荷根据能量转换的不同，又可分为动力负荷、电热负荷、电解负荷及整流负荷。'
							},
							{
								id: '4',
								title: 'chargeStation',
								img: require("../../assets/img/sidebar/img/chargeStation.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/chargeStation1.png"),
								introduce: '充电桩的输入端与交流电网直接连接，输出端都装有充电插头用于为电动汽车充电。充电方式可分为常规充电方式和快速充电方式。常规充电方式包括阶段充电方式、恒电压充电方式、恒电流充电方式等，快速充电方式包括变电流充电方式、变电流间歇充电方式、脉冲式充电方式等。电动汽车有序充电控制一般以充电时间和充电功率为控制变量，以经济最优或对电网影响最小。'
							},
							{
								id: '5',
								title: 'biandian',
								img: require("../../assets/img/sidebar/img/biandian.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/biandian1.png"),
								introduce: '变电站是指电力系统中对电压和电流进行变换、接受和分配电能、控制电力的流向和调整电压的场所，它通过其变压器将各级电压的电网联系起来。变电站是电力系统的一部分，主要用于输电及配电，其主要功能是利用变压器将电压改变，其次亦能将为电网提供功率因数补偿、电力系统保护等。'
							},
							{
								id: '6',
								title: 'node',
								img: require("../../assets/img/sidebar/img/node.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/node1.png"),
								introduce: '在电力系统中，母线是指在输配电系统中，配电盘、配电箱、变电站等使用的导电的铜线或铝线，用以连接同一电压的线路。母线的横截面积决定了能安全通过的电流的大小，通常母线会选择做成中空圆柱体或是薄片以允许热量迅速散发。'
							},
						]
					},
					{
						list: [{
								id: '7',
								title: 'photovoltaic',
								img: require("../../assets/img/sidebar/img/photovoltaic.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/photovoltaic1.png"),
								introduce: '太阳能光伏发电系统的简称，是一种利用光伏半导体材料的光生伏特效应（即光照使不均匀半导体或半导体与金属结合的不同部位之间产生电位差的现象），将太阳光辐射能直接转换为电能的一种新型发电系统，有独立运行和并网运行两种方式。光伏板主要由太阳电池板（组件）、控制器和逆变器三大部分组成。'
							},
							{
								id: '8',
								title: 'capacitor',
								img: require("../../assets/img/sidebar/img/capacitor.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/capacitor1.png"),
								introduce: '又称移相电容器，主要用于补偿电力系统感性负荷的无功功率，以提高功率因数，改善电压质量，降低线路损耗。常用的并联电容器按其结构不同，可分为单台铁壳式、箱式、集合式、半封闭式、干式和充气式等多类品种。'
							},
							{
								id: '9',
								title: 'generator',
								img: require("../../assets/img/sidebar/img/generator.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/generator1.png"),
								introduce: '柴油发电机是指以柴油等为燃料，以柴油机曲轴旋转来带动发电机转动发电的小型发电设备。柴油发电机组一般由柴油机、发电机、控制箱、燃油箱、起动和控制用蓄电瓶、保护装置、应急柜等部件组成。发电机可以是直流发电机或交流发电机。发电机的磁极铁芯存在剩磁，当柴油机带动发电机电枢旋转时，电枢线圈在磁场中切割磁力线，根据电磁感应原理，产生电流并经炭刷输出。'
							},
							{
								id: '10',
								title: 'transformer',
								img: require("../../assets/img/sidebar/img/transformer.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/transformer1.png"),
								introduce: '变压器由铁心或磁心与线圈组成，线圈有两个或两个以上的绕组，其中接电源的绕组称为一次绕组又称为初级绕组，其余的绕组称为二次绕组又称为次级绕组。变压器具有降压、升压、信号耦合、能量传递、变换阻抗、隔离等作用。'
							}, {
								id: '11',
								title: 'windPower',
								img: require("../../assets/img/sidebar/img/windPower.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/windPower1.png"),
								introduce: '将风能转换为机械功，机械功带动转子旋转，最终输出交流电的电力设备。风力发电机一般有风轮、发电机(包括装置)、调向器(尾翼)、塔架、限速安全机构和储能装置等构件组成。其工作原理为利用风力带动风车叶片旋转，再透过增速机将旋转的速度提升，从而将风的动能转变为风轮轴的机械能，发电机在风轮轴的带动下旋转发电。'
							},
							{
								id: '12',
								title: 'guidao',
								img: require("../../assets/img/sidebar/img/guidao.png"),
								imgActive: require("../../assets/img/sidebar/hoverimg/guidao1.png"),
								introduce: '在我国国家标准《城市公共交通常用名词术语》中，将城市轨道交通定义为“通常以电能为动力，采取轮轨运输方式的快速大运量公共交通的总称”。城市轨道交通内部牵引供电系统由牵引变电站系统、牵引网系统、机车系统，其中，牵引网系统由馈线、轨道回路及回流线组成。列车运行时，电能由牵引变电所经馈电线和接触网输送给电动列车，再由电动列车经钢轨、回流线流回。城市轨道交通接触网供电方式有单边、双边、大双边及Tee型供电方式。单边供电方式牵引变电所馈线保护装置较简单；供电分区电气独立，运行灵活；故障范围小。单边供电方式只能用作临时紧急供电，双边供电方式是最常用的，Tee型供电可在馈线发生故障时由相邻供电段供电。列车制动方式分为摩擦制动和动力制动，其中，动力制动包括电阻制动和再生制动。可通过控制牵引整流器和逆变器实现制动能量的利用，即能量回馈系统。'
							}
						]
					},
				],
				introduce: require('../../assets/img/equi/introduce/car1.png'),
				symbol1: require('../../assets/img/symbol/car.png'),
				symbol2: require('../../assets/img/home/nodes/8.png'),
				activeName: 'first',
				// 小汽车
				vehicleData: [{
					parameter: '最高车速km/h',
					model3: '225',
					es8: '200',
					ex360: '130'
				}, {
					parameter: '电动机总功率kw',
					model3: '202',
					es8: '320',
					ex360: '70'
				}, {
					parameter: '发动机',
					model3: '纯电动275马力发动机',
					es8: '纯电动435马力发动机',
					ex360: '纯电动95马力发动机'
				}, {
					parameter: '电池类型',
					model3: '磷酸铁锂电池',
					es8: '三元锂电池',
					ex360: '三元锂电池'
				}, {
					parameter: '电池容量kWh',
					model3: '55',
					es8: '70',
					ex360: '48'
				}, {
					parameter: '续航里程km',
					model3: '468',
					es8: '410',
					ex360: '403'
				}],
				//电池
				storageData: [{
					parameter: '类型',
					storage: '锂电池',
					es8: '类型',
					capacity: '电力电容器'
				}, {
					parameter: '额定容量Ah',
					storage: '50',
					es8: '低电感',
					capacity: 'Ls<13nH'
				}, {
					parameter: '额定电压V',
					storage: '48',
					es8: '额定电压V',
					capacity: '600~2000'
				}, {
					parameter: '额定电流A',
					storage: '10',
					es8: '额定电容μF',
					capacity: '20~400'
				}],
				//负荷
				loadData: [{
					parameter: '额定功率W',
					litload: '34',
					motor: '15000',
					airCondition: '2000'
				}, {
					parameter: '额定电压V',
					litload: '220',
					motor: '220/380',
					airCondition: '220'
				}, {
					parameter: '额定电流A',
					litload: '0.16',
					motor: '6.89/3.99',
					airCondition: '10'
				}, {
					parameter: '额定频率Hz',
					litload: '50',
					motor: '50',
					airCondition: '50'
				}],
				//充电站
				chargeStationData: [{
					parameter: '额定功率KW',
					DCX007A: '7',
					DCX015A: '15',
					DCX020A: '20'
				}, {
					parameter: '输入电压V',
					DCX007A: 'AC220V±20%',
					DCX015A: 'AC380V±20%',
					DCX020A: 'AC380V±20%'
				}, {
					parameter: '输入频率A',
					DCX007A: '45~65',
					DCX015A: '45~65',
					DCX020A: '45~65'
				}, {
					parameter: '输出电压V',
					DCX007A: '200~450',
					DCX015A: '200~750',
					DCX020A: '50~550'
				}, {
					parameter: '输出电流A',
					DCX007A: '0~15',
					DCX015A: '0~20',
					DCX020A: '0~47.5'
				}, {
					parameter: '缆线长度m',
					DCX007A: '5',
					DCX015A: '5',
					DCX020A: '5'
				}],
				//变电站
				biandianData: [{
					parameter: '额定容量KVA',
					combined: '80',
				}, {
					parameter: '额定电压KV',
					combined: '10/0.4',
				}, {
					parameter: '额定频率Hz',
					combined: '50',
				}],
				//母线
				nodeData: [{
					parameter: '额定电流A',
					type1: '250、400、630、800',
					type2: '1000、1250、1600、2000',
					type3: '2500、3150',
				}, {
					parameter: '热稳定电流kA',
					type1: '30',
					type2: '50',
					type3: '80',
				}, {
					parameter: '动稳定电流kA',
					type1: '63',
					type2: '105',
					type3: '176',
				}, {
					parameter: '介电强度',
					type1: '3750V，历时5s',
					type2: '3750V，历时5s',
					type3: '3750V，历时5s',
				}],
				//光伏
				photovoltaicData: [{
					parameter: '最大功率W',
					combined: '230',
				}, {
					parameter: '开路电压V',
					combined: '37.0',
				}, {
					parameter: '电路电流A',
					combined: '8.22',
				}, {
					parameter: '最大工作电压V',
					combined: '29.8',
				}, {
					parameter: '最大工作电流A',
					combined: '7.72',
				}],
				//并联电容器
				capacitorData: [{
					parameter: '额定容量kVA',
					combined: '30',
				}, {
					parameter: '额定电压V',
					combined: '415',
				}, {
					parameter: '额定电流A',
					combined: '41.7',
				}, {
					parameter: '额定频率Hz',
					combined: '50',
				}],
				//柴油发电机
				generatorData: [{
					parameter: '额定转速r/min',
					combined: '1500',
				}, {
					parameter: '额定频率Hz',
					combined: '50',
				}, {
					parameter: '额定功率kW',
					combined: '600',
				}, {
					parameter: '额定电压V',
					combined: '400',
				}, {
					parameter: '额定电流S',
					combined: '900',
				}, {
					parameter: '功率因数',
					combined: '0.8',
				}],
				//变压器
				transData: [{
					parameter: '适用场景',
					box: '配电网',
					storage: '电器降压',
				}, {
					parameter: '额定容量kVA',
					box: '100',
					storage: '2',
				}, {
					parameter: '额定电压V',
					box: '高压6300,低压400',
					storage: '输入220~240,输出100~120',
				}, {
					parameter: '空载电流%',
					box: '1.6',
					storage: '',
				}, {
					parameter: '损耗W',
					box: '空载290,负载1500',
					storage: '',
				}, {
					parameter: '阻抗电压%',
					box: '4',
					storage: '',
				}],
				//风电
				windPowerData: [{
					parameter: '额定功率MW',
					value: '1500',
				}, {
					parameter: '额定风速m/s',
					value: '2.5',
				}, {
					parameter: '最大变桨速度°/s',
					value: '13',
				}, {
					parameter: '发电机额定电压V',
					value: '12',
				}, {
					parameter: '发电机额定频率Hz',
					value: '690',
				}, {
					parameter: '液压泵额定输出kW',
					value: '50',
				}, {
					parameter: '风轮扫风功率/面积',
					value: '1.5',
				}, {
					parameter: '齿轮箱额定功率MW',
					value: '2.671',
				}, {
					parameter: '变压器额定输出MVA',
					value: '2.7',
				}, {
					parameter: '制动系统',
					value: '空气制动',
				}],
				//轨道
				guidaoData: [{
					parameter: '供电电压V',
					value1: 'DC750/1500',
					value2: 'DC1500',
				}, {
					parameter: '接触网类型',
					value1: '接触轨',
					value2: '架空接触网',
				}, {
					parameter: '接触/悬挂方式',
					value1: '上接触/下接触/侧接触',
					value2: '刚性/柔性',
				}, {
					parameter: '车辆受电方式',
					value1: '集电靴',
					value2: '受电弓',
				}, {
					parameter: '允许速度km/h',
					value1: '80',
					value2: '80~120/140',
				}],
			}
		},
		methods: {
			toRouter(index, title) {
				this.current = index;
				if(this.current == 1){
					document.getElementById('right0').style.zIndex='10';
					document.getElementById('right1').style.zIndex='9'
				}else if(this.current == 12){
					document.getElementById('right1').style.zIndex='10';
					document.getElementById('right0').style.zIndex='9'
				}
				if (title == 'vehicle') {
					this.introduce = require('../../assets/img/equi/introduce/car1.png');
					this.symbol1 = require('../../assets/img/symbol/car.png');
					this.symbol2 = require('../../assets/img/home/nodes/8.png');
				} else if (title == 'chargeStation') {
					this.introduce = require('../../assets/img/equi/introduce/chongdian.png');
					this.symbol1 = require('../../assets/img/symbol/chongdian.png');
					this.symbol2 = require('../../assets/img/home/nodes/2.png');
				} else if (title == 'load') {
					this.introduce = require('../../assets/img/introduce/load.png');
					this.symbol1 = require('../../assets/img/symbol/load.png');
					this.symbol2 = require('../../assets/img/home/nodes/load.png');
				} else if (title == 'storage') {
					this.introduce = require('../../assets/img/equi/introduce/storage.png');
					this.symbol1 = require('../../assets/img/symbol/storage.png');
					this.symbol2 = require('../../assets/img/home/nodes/4.png');
				} else if (title == 'photovoltaic') {
					this.introduce = require('../../assets/img/equi/introduce/photovoltaic.png');
					this.symbol1 = require('../../assets/img/symbol/photovoltaic.png');
					this.symbol2 = require('../../assets/img/home/nodes/3.png');
				} else if (title == 'capacitor') {
					this.introduce = require('../../assets/img/equi/introduce/capacitor.png');
					this.symbol1 = require('../../assets/img/symbol/capacitor.png');
					this.symbol2 = require('../../assets/img/home/nodes/12.png');
				} else if (title == 'transformer') {
					this.introduce = require('../../assets/img/equi/introduce/transformer.png');
					this.symbol1 = require('../../assets/img/symbol/transformer.png');
					this.symbol2 = require('../../assets/img/home/nodes/5.png');
				} else if (title == 'node') {
					this.introduce = require('../../assets/img/equi/introduce/node.png');
					this.symbol1 = require('../../assets/img/symbol/node.png');
					this.symbol2 = require('../../assets/img/home/nodes/11.png');
				} else if (title == 'biandian') {
					this.introduce = require('../../assets/img/equi/introduce/biandian.png');
					this.symbol1 = require('../../assets/img/symbol/biandian.png');
					this.symbol2 = require('../../assets/img/home/nodes/14.png');
				} else if (title == 'generator') {
					this.introduce = require('../../assets/img/equi/introduce/generator.png');
					this.symbol1 = require('../../assets/img/symbol/generator.png');
					this.symbol2 = require('../../assets/img/home/nodes/1.png');
				} else if (title == 'guidao') {
					this.introduce = require('../../assets/img/equi/introduce/guidao.png');
					this.symbol1 = require('../../assets/img/symbol/chongdian.png');
					this.symbol2 = require('../../assets/img/home/nodes/2.png');
				} else if (title == 'windPower') {
					this.introduce = require('../../assets/img/equi/introduce/windPower.png');
					this.symbol1 = require('../../assets/img/symbol/windPower.png');
					this.symbol2 = require('../../assets/img/home/nodes/7.png');
				} else {
					this.introduce = ''
				}
			},
			handleClick(tab, event) {
				// console.log(tab, event);
			},
			cellStyle() {
				return "text-align:center;backgroundColor:#011633;color:#ccc;"
			},
			headerStyle() {
				return "text-align:center"
			},
		}
	}
</script>

<style scoped>
	body .wrapper {
		background-image: url(../../assets/img/equi/back1.png);
		position: relative;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.el-container {
		width: 100%
	}

	.back_circle {
		height: 500px;
		width: 650px;
		background-image: url(../../assets/img/equi/circle.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		float: left;
	}

	.back_line {
		height: 100px;
		width: 40%;
		background-image: url(../../assets/img/equi/line.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		float: left;
		margin-top: 400px;
		margin-left: -150px
	}


	.back_bottom {
		height: 200px;
		width: 55%;
		background-image: url(../../assets/img/equi/bottom.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		float: left;
		margin-top: -30px;
	}


	.el-main {
		height: 92%;
		position: absolute;
		left: 0px;
		top: 60px;
		right: 0;
		padding-top: 50px;
		overflow: hidden;
	}

	.el-carousel__item.is-active.is-animating div div {
		color: #07C4A8
	}

	.guidao {
		font-size: 15px;
	}

	.pane {
		width: 100%;
		margin: 30px 12%;
		position: relative;
		height: 100%
	}

	#car {
		height: 100%;
	}

	#carWrap {
		height: 70%;
		width: 36%;
		margin-left: 0%;
		top: 8%
	}

	#car>>>.el-carousel__container {
		height: 100%;
	}
	#car>>>.el-carousel__arrow.el-carousel__arrow--left,#car>>>.el-carousel__arrow.el-carousel__arrow--right{
		top:39%
	}
	

	.bigimg {
		position: absolute;
		height: calc(50%);
		width: calc(25%);
		left: calc(7%);;
		top: calc(7%);
	}

	.el-tab-pane {
		height: 70%;
		width: 100%;
		margin-left: 0%;
		top: 8%
	}

	.bigimg1 {
		position: absolute;
		height: 72%;
		width: 90%;
		margin-left: 4%;
		top: 8%
	}
	
	
	.carousel_img{
		position: absolute;
		height: calc(70%);
		width: calc(60%);
		left: calc(23%);;
		top: calc(11%);
	}

	.right {
		position: absolute;
		height: 52%;
		width: 30%;
		margin-left: 54%;
		width: 400px;
		top: 15%;
		overflow: scroll;
	}

	#right0 {
		z-index: 9;
	}

	#right0::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 10px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 0px;
	}

	#right0::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: rgb(30,101,148)
	}

	#right0::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: transparent;

	}
	
	#right1::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 10px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 0px;
	}
	
	#right1::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: rgb(30,101,148)
	}
	
	#right1::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: transparent;
	
	}

	p.rightText {
		color: #fff;
		line-height: 40px;
		font-size: 20px;
	}

	p.guidao {
		margin-top: -30px;
		color: #fff;
		line-height: 28px;
		font-size: 16px;
	}

	.pane>>>.el-tabs.el-tabs--left {
		height: 100%
	}

	.pane>>>.el-tabs__content {
		height: 100%
	}

	.pane>>>.el-tabs__header.is-left {
		height: 120px
	}

	.pane>>>.el-tabs__nav.is-left .el-tabs__item.is-left {
		color: #c2dbf2
	}

	.pane>>>.el-tabs__nav.is-left .el-tabs__item.is-active {
		color: #00FFFF;
	}

	.pane>>>.el-tabs__active-bar.is-left {
		background-color: #00FFFF;
	}

	.pane>>>.el-tabs--card>.el-tabs__header .el-tabs__item {
		border-left: 1px solid #2d6c87;
	}

	.pane>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
		border: 1px solid #2d6c87;
	}

	.pane>>>.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
		border-bottom-color: #2d6c87;
	}

	.pane>>>.el-tabs--card>.el-tabs__header {
		border-bottom: 1px solid #2d6c87;
	}
	
	#pane-second{
		display: flex;
		align-items: center; /*定义body的元素垂直居中*/
		justify-content: center; /*定义body的里的元素水平居中*/
		width:37%;
	}

	.pane>>>.el-table {
		margin-left: 4.5%;
	}
	
	.pane>>>.el-carousel__arrow{
		font-size: 60px;
	}


	.symbol {
		padding-top: 18%;
		margin: 0 auto;
		width: 40%;
		vertical-align: middle;
		display: table-cell;
		text-align: center;
	}

	.load {
		padding-top: 18%;
		margin: 0 auto;
		width: 15%;
		vertical-align: middle;
		display: table-cell;
		text-align: center;
	}

	.loadimg {
		width: 40%;
		padding-top: 10%;
		margin-left: 20%;
		margin-right: 5%
	}

	.loadimg2 {
		width: 40%;
		margin-left: 5%
	}

	footer {
		height: 150px;
		width: 70%;
		position: absolute;
		bottom: 2%;
		left: 15%
	}

	footer>>>.el-carousel__container {
		position: relative;
		height: 150px !important;
	}

	.round {
		width: 16.666%;
		text-align: center;
		float: left;
	}

	.roundImg {
		width: 80px;
		cursor: pointer;
	}

	.roundImg_hover {
		width: 80px;
		cursor: pointer;
	}

	footer>>>.el-carousel__indicators.el-carousel__indicators--horizontal {
		display: none;
	}

	footer>>>button.el-carousel__arrow.el-carousel__arrow--left {
		background-image: url(../../assets/img/equi/arrow_right.png);
		height: 70px;
		border-radius: 0;
		background-size: 100% 90%;
		background-repeat: no-repeat;
	}

	footer>>>.el-carousel__arrow.el-carousel__arrow--right {
		background-image: url(../../assets/img/equi/arrow_left.png);
		height: 70px;
		border-radius: 0;
		background-size: 100% 90%;
		background-repeat: no-repeat;
	}

	footer>>>.el-icon-arrow-right:before,
	footer>>>.el-icon-arrow-left:before {
		content: "";
	}
</style>

<style>

</style>
